<template>
  <div class="pay">
    <!-- 支付页面 -->
    <van-action-sheet v-model:show="show" title=" ">
      <div class="content">
        <div class="title">订单需支付金额</div>
        <div class="moeny"><span>￥</span>{{ totalPrice }}</div>
        <van-cell-group>
          <van-cell
            title="账号"
            :value="user.replace(/^(\d{3})\d{4}(\d{4})/, '$1****$2')"
          />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="付款方式" value="微信支付" />
        </van-cell-group>
        <van-button type="primary" @click="payBtn" block>确认付款</van-button>
      </div>
    </van-action-sheet>
  </div>
</template>

<script setup>
</script>
<style lang="scss" scoped>
.pay {
  width: 100vw;
  .content {
    padding: 8vw 4.2667vw 0;
    height: 80vh;
    .title {
      text-align: center;
      height: 5.3333vw;
      line-height: 5.3333vw;
      margin-bottom: 2.6667vw;
    }
    .moeny {
      height: 10.6667vw;
      text-align: center;
      line-height: 10.6667vw;
      font-size: 10vw;
      margin-bottom: 2.6667vw;
      span {
        font-size: 5vw;
        font-weight: bold;
      }
    }
    .van-button {
      border-radius: 2.6667vw;
    }
  }
}
</style>
